<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>

<div id="app">

    <div class="demo-input-size">

        <el-input
                size="medium"
                placeholder="请输入操作人员"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.username"
        >
        </el-input>
        <el-button icon="el-icon-search" type="brand" circle @click="searchStu()" ></el-button>

        <el-table
                :data="logdataArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="日志编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="操作人员"
                    >
            </el-table-column>
            <el-table-column
                    prop="msg"
                    label="操作类型"
                    >
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="操作状态"
                    >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="操作时间"
                    >
            </el-table-column>
            <el-table-column
                    prop="addr"
                    label="主机"
                    >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    >
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="showDialog(scope.row.id)">详情</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCount">
        </el-pagination>

        <el-dialog title="操作详情" :visible.sync="dialogFormVisible">
            <el-form   :model="logInfo"  ref="logInfo"  >
                <el-input v-model="logInfo.data" type="textarea" ></el-input>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返 回</el-button>
            </div>
        </el-dialog>

    </div>

</div>


<script>



    var haha=new Vue({
        el:"#app",
        data:{
            logdataArr:[],
            searchInfo:{
                username:""
            },
            totalCount:0,
            dialogFormVisible:false,
            logInfo:{}
        },
        methods:{

            showDialog(id){
                        $.get("/ssm/record/querydata?id="+id,function (backData) {
                            haha.logInfo=backData.data;
                            haha.dialogFormVisible=true;
                        });
                    },

            searchStu(){
                getData(1,10);
            },
            handleCurrentChange( val ){
                getData(val,10);
            }

        }
    });

    function getData(a,b) {
        haha.searchInfo.pageNo=a;
        haha.searchInfo.pageCount=b;
        $.post("/ssm/record/query",haha.searchInfo,function (backData) {
            haha.logdataArr=backData.data.currentData;
            haha.totalCount=backData.data.totalCount;
        });
    }

    getData(1,10);


</script>

</body>
</html>